{extend name="$base" /}
{block name="resources"}
<script src="ADMIN_JS/highcharts.js"></script>
<script src="ADMIN_JS/exporting.js"></script>
<style  type="text/css">
.mt5 li{font-size: 12px;}
.ui-tabs-panel{
	border:1px solid #E1E6F0;
	border-top:0;
}
.mytable {border-bottom: solid 1px #E5E5E5;}
.ns-main{margin-top:0px;}
</style>
{/block}
{block name="alert_info"}
1、符合以下任何一种条件的订单即为有效订单：a）采用在线支付方式支付并且已付款；b）采用货到付款方式支付并且交易已完成<br/>
2、图表展示了符合搜索条件的有效订单中的下单总金额和下单商品总数排名前30位的商品
{/block}
{block name="main"}
<input type="hidden" name="act" value="statistics_goods">
<input type="hidden" name="op" value="hotgoods">
<table class="mytable">
	<tr>
		<th>
			统计类型：
			<select name="search_type" id="date" class="select-common middle">
				<option value="1">按照日统计</option>
				<option value="3">按照周统计</option>
				<option value="4">按照月统计</option>
			</select>
			<button  class="btn-common" value="搜索" onclick="searchGoodsSale();">搜索</button>
		</th>
	</tr>
</table>

<nav class="option-nav">
	<ul>
		<li class="selected" ><a href="javascript:;" onclick="getGoodsSalesCharts(1)">下单金额</a></li>
		<li ><a href="javascript:;" onclick="getGoodsSalesCharts(2)">下单商品数</a></li>
	</ul>
</nav>
<div id="orderamount_div" class="ui-tabs-panel" style="display: block;">
	<div id="container_ordergamount" data-highcharts-chart="1">
		<div class="highcharts-container" id="highcharts-2" style="width:99%;position: relative; overflow: hidden; height: 400px; text-align: left;font-size: 12px;"></div>
	</div>
</div>

<div id="goodsnum_div" class="ui-tabs-panel ui-tabs-hide hide">
	<div id="container_goodsnum" data-highcharts-chart="0">
		<div class="highcharts-container" id="highcharts-0" style="width:99%;position: relative; overflow: hidden; height: 400px; text-align: left;font-size: 12px;"></div>
	</div>
</div>

<script type="text/javascript">
var saleNumChart, saleUnit,saleTitle,saleMoneyChart;
var saleNumStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var saleTimeStatistical = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
var saleMoneyStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var saleMoneyTimeStatistical = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
$(function() {
	saleNumChart = new Highcharts.Chart("highcharts-2",{
		title : {
			text : "热卖商品top30",
			align : "center",
			useHTML : true
		},
		xAxis : {
			categories : saleTimeStatistical
		},
		lang : {
			printChart : "打印",
			downloadPNG : "导出PNG格式图片",
			downloadJPEG : "导出JPEG格式图片",
			downloadPDF : "导出PDF格式图片",
			downloadSVG : "导出SVG格式图片"
		},
		yAxis : {
			title : {
				text :saleUnit
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ]
		},
		tooltip : {
			 valueSuffix : saleUnit
		},
		legend : {
			enabled : false
		},
		credits : {
			enabled : false,// 默认值，如果想去掉版权信息，设置为false即可
		text : '熠泽商城', // 显示的文字
			href : '#', // 链接地址
		},
		exporting : {
			allowHTML : true,
			buttons : {
				contextButton : {
				// text : '导出'
				}
			}
		},
		series : [ {
			name : '今日',
			data : saleNumStatistical
		}]
	});
	saleMoneyChart = new Highcharts.Chart("highcharts-0",{
		title : {
			text : "热卖商品top30",
			align : "center",
			useHTML : true
		},
		xAxis : {
			categories : saleMoneyTimeStatistical
		},
		lang : {
			printChart : "打印",
			downloadPNG : "导出PNG格式图片",
			downloadJPEG : "导出JPEG格式图片",
			downloadPDF : "导出PDF格式图片",
			downloadSVG : "导出SVG格式图片"
		},
		yAxis : {
			title : {
				text :saleUnit
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ]
		},
		tooltip : {
			valueSuffix : saleUnit
		},
		legend : {
			enabled : false
		},
		credits : {
			enabled : false,// 默认值，如果想去掉版权信息，设置为false即可
			text : '熠泽商城', // 显示的文字
			href : '#', // 链接地址
		},
		exporting : {
			allowHTML : true,
			buttons : {
				contextButton : {
				// text : '导出'
				}
			}
		},
		series : [ {
			name : '今日',
			data : saleMoneyStatistical
		}]
	});
	getGoodsSalesCharts(1);
});
//走势图数据
var var_type;
function getGoodsSalesCharts(type){
	
	var num = type-1;
	$('.option-nav ul li').eq(num).addClass('selected').siblings().removeClass('selected');
	
	var date = $("#date").val();
	//type 走势图类型 2 金额 1 数量
	var_type = type;
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/account/getgoodssaleschartcount')}",
		data:{ "type":type, "date":date},
		success : function(data) {
			if(type == 1){
				saleUnit = "元";
				saleNumStatistical = data[0];
				saleNumChart.update({
					xAxis : {
						categories : saleNumStatistical
					},
					tooltip : {
						 valueSuffix : saleUnit
					},
					series : [ {
						name : "销售金额",
						data : data[1]
					}],
					yAxis : {
						title : {
							text :saleUnit
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
				})
				$("#orderamount_div").show();
				$("#goodsnum_div").hide();
			}else{
				saleUnit = "件";
				saleMoneyStatistical = data[0];
				saleMoneyChart.update({
					xAxis : {
						categories : saleMoneyStatistical
					},
					tooltip : {
						 valueSuffix : saleUnit
					},
					series : [ {
						name : "销售数量",
						data : data[1]
					}],
					yAxis : {
						title : {
							text :saleUnit
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
				})
				$("#goodsnum_div").show();
				$("#orderamount_div").hide();
			}
		
		}
	});
}
//查询商品销售情况
function searchGoodsSale(){
	getGoodsSalesCharts(var_type);
}
</script>
{/block}